<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table align="center" border="1" cellpadding="10">
			<caption><h1>用户信息表</h1></caption>
			<thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>邮箱</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tb">
				<tr>
					<td>赵一</td>
					<td>男</td>
					<td>21</td>
					<td>zhaoyi@qq.com</td>
					<td><input type="button" value="删除"></td>
				</tr>
			</tbody>
			<tfoot align="right">
				<tr>
					<td colspan="5">
						<input type="button" value="删除首行" id="shou">
						<input type="button" value="删除末行" id="wei">
					</td>
				</tr>
			</tfoot>
		</table>
		<form action="" align="center">
			<fieldset>
			<legend><h2>用户注册表</h2></legend>
				<p>
					姓名：
					<input type="text" name="username" id="username" />
				</p>
				<p>
					年龄：
					<input type="text" name="age" id="age" />
				</p>
				<p>
					性别：
					<input type="radio" name="gender" id="male" checked  value="男" />男
					<input type="radio" name="gender" id="female" value="女"/>女
				</p>
				<p>
					邮箱：
					<input type="text" name="email" id="email">
				</p>
				<input type="button" id="btn" value="添加数据">
			</fieldset>
		</form>
	</body>
	<script>
		function $(id){
			return document.getElementById(id);
		}
		function td(ele){
			return document.createElement(ele);
		}
		var btn=document.getElementById('btn');
		btn.onclick=function(){
			var username=$('username').value;
			//console.log(username);
			var age=$('age').value;
			var gender=$('male').checked?$('male').value:$('female').value;
			//console.log(gender);
			var email=$('email').value;

			//var tdName=document.createElement('td');
			var taName=td('td');
			var taAge=td('td');
			var taGender=td('td');
			var taEmail=td('td');

			taName.innerText=username;
			taAge.innerText=age;
			taGender.innerText=gender;
			taEmail.innerText=email;

			var tdshC=td('td');
			var shCbtn=td('input');
			shCbtn.type='button';
			shCbtn.value='删除';
			shCbtn.onclick=function(){
				$('tb').removeChild(this.parentNode.parentNode);
			}
			tdshC.appendChild(shCbtn);
			var tr=td('tr');
			tr.appendChild(taName);
			tr.appendChild(taAge);
			tr.appendChild(taGender);
			tr.appendChild(taEmail);
			tr.appendChild(tdshC);
			console.log(tr);

			$('tb').appendChild(tr);

			shou.onclick=function(){
				
			}
			wei.onclick=function(){
				
			}
		}
	</script>
</html>